<template>
  <div class="register">

          <vue-particles
          class="login-bg"
          color="#0076c3"
          :particleOpacity="0.7"
          :particlesNumber="60"
          shapeType="circle"
          :particleSize="4"
          linesColor="#8DD1FE"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="2"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push"
          >      
        </vue-particles>

    <el-form ref="form" :model="form" :rules="rules" label-width="215px" class="login-form">
       <div style="text-align: center;">
       
        <img v-if="logo" :src="logo" class="logo_picture">
       </div>

      <el-form-item label="用户账号" prop="userName" label-width="100px">
        <el-input v-model="form.userName" placeholder="请输入账号信息" class="normalClass"></el-input>
      </el-form-item>

      <el-form-item label="用户昵称" prop="nickName" label-width="100px">
        <el-input v-model="form.nickName" placeholder="请输入用户昵称" class="normalClass"></el-input>
      </el-form-item>

      <el-form-item label="电子邮箱" prop="email" label-width="100px">
        <el-input v-model="form.email" placeholder="请输入电子邮箱" class="normalClass"></el-input>
      </el-form-item>

      <el-form-item label="手机号码" prop="phonenumber" label-width="100px">
        <el-input v-model.number="form.phonenumber" placeholder="请输入手机号码" class="normalClass"></el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="phonecode" label-width="100px">
        <el-input v-model="form.phonecode" placeholder="请输入您收到的验证码" class="yzmClass"></el-input>
          <el-button v-if="yzmBool==false" type="primary" class="getNumber" @click="sendNumber" plain>获取验证码</el-button>
          <el-button v-else type="primary" class="getNumber" plain>{{this.yzmtext}}</el-button>
      </el-form-item>

      <el-form-item label="用户性别" prop="sex" label-width="100px">
        <el-radio-group v-model="form.sex" class="normalClass">
          <el-radio label="0" checked>男</el-radio>
          <el-radio label="1">女</el-radio>
          <el-radio label="2">未知</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="密码" prop="password" label-width="100px">
        <el-input type="password" v-model="form.password" placeholder="请输入密码" class="normalClass" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass" label-width="100px">
        <el-input type="password" v-model="form.checkPass" placeholder="再次输入密码" class="normalClass" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="info" @click="backLog">返回登录</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="cancel('form')">重置</el-button>
      </el-form-item>
      
    </el-form>

    <!--  底部  -->
    <div class="el-register-footer">
      <span>Copyright © 2020-2021 工大软件-人工智能工作室 All Rights Reserved.| <a class="knowMore" href="/cms/home">[官网]了解更多</a> </span>
    </div>

  </div>
</template>


<script>

import { register } from '@/api/register'
import { getSmsCode} from "@/api/login";
import logoImg from '@/assets/image/logo5.png'
  export default {
    data() {
      //判断邮箱有效性
      let checkEmail = (rule, value, callback) => {
        let strRegex = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/;
          if(!strRegex.test(this.form.email)) {
            callback(new Error('请输入正确的电子邮箱'));
          } else {
            callback();
          }
      };
      //  判断手机号码有效性
      let checkPhoneNumber = (rule, value, callback) => {
        let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
        if (!value) {
          return callback(new Error('手机号码不能为空'));

        }else if(!Number.isInteger(value)) {
          callback(new Error('请确认输入手机号码'));
          
        }else if(phoneReg.test(this.form.phonenumber) == false) {
          //console.log("请核对您的手机号码")
          callback(new Error('请输入有效的手机号码'));

        } else {
          callback()
        }
      };
      //判断密码必须由数字和字母组成且需大于6位
      let validatePass = (rule, value, callback) => {
        var reg = /(?=.*[a-z])(?=.*\d)(?=.*[#@!~%^&*])[a-z\d#@!~%^&*]{6,18}/;
        if (value === '') {
          callback(new Error('请输入密码'));
          
        } else if (!reg.test(this.form.password)) {
          callback(new Error('为了您的账号安全，密码长度需6-18位，且必须包含数字、字母和特殊字符'));

        } else {
          if (this.form.checkPass !== '') {
            this.$refs.form.validateField('checkPass');

          }
          callback();
        }
      };
      //效验两次输入的密码是否一致
      let validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));

        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));

        } else {
          callback();
        }
      };
      return {
        form: {
          userName: '',
          nickName: '',
          email: '',
          phonenumber: '',
          sex: '0',
          password: ''
        },
        //表单校验
        rules: {
          userName: [
            { required: true, message: "账号信息不能为空", trigger: "blur" }
          ],
          nickName: [
            { required: true, message: "用户昵称不能为空", trigger: "blur" }
          ],
          email: [
            { required: true, validator: checkEmail, trigger: "blur" }
          ],
          phonenumber: [
            { required: true, validator: checkPhoneNumber, trigger: "blur" }
          ],
          phonecode: [
            { required: true, message: "验证码不能为空", trigger: "blur" }
          ],
          sex: [
            { required: true, trigger: "blur" }
          ],
          password: [
            { required: true, validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { required: true, validator: validatePass2, trigger: 'blur' }
          ]
        },
        yzmBool: false,
        yzmtext: "60s",
        logo: logoImg,
      };

    },
    methods: {
      // 返回登录页面
      backLog() {
        this.$router.push("/login");
      },
      // 提交按钮
      submitForm: function () {
        console.log('OvO');
        this.$refs["form"].validate((valid) => {
          console.log("valid", valid);
          if (valid) {
            register(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("注册成功！");
                this.$router.push("/login");
              } else {
                this.msgError(response.msg);
              }
            });

          }
        });
      },
      // 取消按钮
      cancel(form) {
        this.$refs[form].resetFields();
      },
      //发送验证码
      sendNumber() {
        //  判断手机号码有效性
        let telFlag = true;
        let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
        
        if (!this.form.phonenumber) {
          telFlag = false;

        }else if(!Number.isInteger(this.form.phonenumber)) {
          telFlag = false;
          
        }else if(phoneReg.test(this.form.phonenumber) == false) {

          telFlag = false;

        } 
        if(telFlag){

          let i = 60;
          let timer = setInterval(() => {
              this.yzmtext = i + 's';
              i--;
              if (i < 0) {
                  this.yzmBool = false;
                  this.yzmtext = '获取验证码';
                  clearInterval(timer);
              }
          }, 1000);
        }

        getSmsCode(this.form.phonenumber ).then(response => {
          if (response.code == 200) {
            this.yzmBool = true;
          }else{
            this.msgError("发送手机验证码错误");
          }
        });
      }
    }
  }
</script>


<style lang="scss" scoped>
  .register {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url("../assets/image/star.jpg");
    background-size: cover;
    position: relative;
  }
  .title {
    margin: 0px auto 50px auto;
    text-align: center;
    color: #BCD4EB;
    font-size: 27px;
  }
  /deep/ .el-form {
    width: 550px;
  }
  /deep/ .el-form-item__label {
    color: #fff;
  }
  /* 单选文字的设置 */
  /deep/ .el-radio__label {
    color: #fff;
  }
  /* .el-input__inner {
    width: 400px;
  } */
  /deep/ .el-radio__input.is-checked .el-radio__inner {
    border-color: #fff;
    background: #1890ff;
  }
  
  .yzmClass {
    width: 290px;
  }
  .normalClass {
    width: 415px;
  }
  .getNumber {
    width: 110px !important;
    margin-left: 10px;
  }
  .el-register-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }
  .knowMore {
    color: #1890FF;
  }
  .knowMore:hover {
    color: #46A6FF;
    cursor: pointer;
  }
  .login-bg{
    width: 100%;
    height: 99%;   
    position: absolute;
  }
  .login-form {
    z-index:10 ;
    border-radius: 6px;
    /** background: #ffffff;**/
    background-image: url("../assets/image/img-bg2.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 600px;
    padding: 25px 25px 5px 25px;
    .el-input {
      height: 38px;
      input {
        height: 38px;
      }
    }
    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
}
.logo_picture {
    margin-top: 0px;
    padding-bottom: 15px;
    padding-left: 35px;
    width: 350px;
}
</style>